<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($settings['site_name'] ?? '报单系统'); ?></title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: <?php echo $_SESSION['theme_color']; ?>;
            --primary-light: <?php echo adjustBrightness($_SESSION['theme_color'], 30); ?>;
            --primary-dark: <?php echo adjustBrightness($_SESSION['theme_color'], -20); ?>;
            --primary-transparent: <?php echo hex2rgba($_SESSION['theme_color'], 0.1); ?>;
            --primary-semi-transparent: <?php echo hex2rgba($_SESSION['theme_color'], 0.8); ?>;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --info-color: #17a2b8;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
        }

        /* 覆盖Bootstrap默认颜色 */
        .bg-primary {
            background-color: var(--primary-color) !important;
        }
        
        .btn-primary {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark) !important;
            border-color: var(--primary-dark) !important;
        }
        
        .btn-outline-primary {
            color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
        }
        
        .btn-outline-primary:hover {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
        }
        
        .text-primary {
            color: var(--primary-color) !important;
        }
        
        .border-primary {
            border-color: var(--primary-color) !important;
        }
        
        .alert-primary {
            background-color: var(--primary-transparent) !important;
            border-color: var(--primary-light) !important;
            color: var(--primary-dark) !important;
        }
        
        .badge.bg-primary {
            background-color: var(--primary-color) !important;
        }
        
        .nav-pills .nav-link.active {
            background-color: var(--primary-color) !important;
        }
        
        .page-link {
            color: var(--primary-color);
        }
        
        .page-item.active .page-link {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .form-check-input:checked {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .progress-bar {
            background-color: var(--primary-color);
        }
        
        /* 自定义卡片头部样式 */
        .card-header.bg-primary {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
            color: white !important;
        }
        
        .card-header.bg-success {
            background: linear-gradient(135deg, var(--success-color) 0%, #1e7e34 100%) !important;
            color: white !important;
        }
        
        .card-header.bg-info {
            background: linear-gradient(135deg, var(--info-color) 0%, #138496 100%) !important;
            color: white !important;
        }
        
        .card-header.bg-warning {
            background: linear-gradient(135deg, var(--warning-color) 0%, #e0a800 100%) !important;
            color: #212529 !important;
        }
        
        .card-header.bg-danger {
            background: linear-gradient(135deg, var(--danger-color) 0%, #c82333 100%) !important;
            color: white !important;
        }

        /* 统计卡片样式 */
        .card.bg-warning {
            background: linear-gradient(135deg, var(--warning-color) 0%, #e0a800 100%) !important;
        }
        
        .card.bg-success {
            background: linear-gradient(135deg, var(--success-color) 0%, #1e7e34 100%) !important;
        }
        
        .card.bg-danger {
            background: linear-gradient(135deg, var(--danger-color) 0%, #c82333 100%) !important;
        }
        
        .card.bg-info {
            background: linear-gradient(135deg, var(--info-color) 0%, #138496 100%) !important;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fa;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.25rem;
        }
        
        .navbar-nav .nav-link {
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        .navbar-nav .nav-link:hover {
            transform: translateY(-1px);
        }
        
        .card {
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }
        
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .btn {
            transition: all 0.3s ease;
        }
        
        .btn:hover {
            transform: translateY(-1px);
        }
        
        .table-hover tbody tr:hover {
            background-color: var(--primary-transparent);
        }
        
        .status-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.5rem;
            border-radius: 50rem;
        }
        
        .feature-item {
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .feature-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }
        
        .order-card {
            border-left: 4px solid var(--primary-color);
        }
        
        .order-card.settled {
            border-left-color: var(--success-color);
        }
        
        .order-card.refunded {
            border-left-color: var(--danger-color);
        }
        
        .floating-action {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1030;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            min-height: 100vh;
            box-shadow: 2px 0 10px rgba(0,0,0,0.1);
            width: 250px;
        }
        
        .sidebar .nav-link {
            color: rgba(255,255,255,0.8);
            padding: 12px 20px;
            margin: 4px 0;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .sidebar .nav-link:hover {
            color: white;
            background-color: rgba(255,255,255,0.1);
            transform: translateX(5px);
        }
        
        .sidebar .nav-link.active {
            background-color: rgba(255,255,255,0.2);
            color: white;
            border-left: 4px solid white;
        }
        
        .sidebar-header {
            padding: 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        
        .sidebar .navbar-brand {
            color: white;
            font-size: 1.5rem;
        }
        
        .main-content {
            margin-left: 0;
            transition: all 0.3s ease;
            flex: 1;
        }
        
        @media (min-width: 768px) {
            .main-content {
                margin-left: 250px;
            }
        }
        
        .theme-selector {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 1050;
        }
        
        .theme-palette {
            display: none;
            position: absolute;
            bottom: 100%;
            right: 0;
            background: white;
            border-radius: 10px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            min-width: 200px;
        }
        
        .theme-palette.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        .theme-option {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            margin: 5px 0;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .theme-option:hover {
            background-color: var(--light-color);
        }
        
        .theme-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 10px;
            border: 2px solid #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .modal-backdrop {
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .form-floating > .form-control:focus ~ label,
        .form-floating > .form-control:not(:placeholder-shown) ~ label,
        .form-floating > .form-select ~ label {
            color: var(--primary-color);
        }
        
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1050;
        }
        
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
            border-width: 0.1em;
        }
        
        .text-truncate-2 {
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* 导航栏下拉菜单 */
        .dropdown-menu {
            border: none;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        }
        
        .dropdown-item:hover {
            background-color: var(--primary-transparent);
            color: var(--primary-color);
        }

        /* 表单焦点样式 */
        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem var(--primary-transparent);
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar position-fixed top-0 start-0 vh-100 d-none d-md-block">
        <div class="sidebar-header">
            <a class="navbar-brand" href="index.php">
                <i class="bi bi-box-seam"></i> <?php echo htmlspecialchars($settings['site_name'] ?? '报单系统'); ?>
            </a>
        </div>
        <div class="sidebar-content p-3">
            <?php if (isLoggedIn()): ?>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'orders.php' ? 'active' : ''; ?>" href="orders.php">
                            <i class="bi bi-list-check"></i> 我的订单
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'submit.php' ? 'active' : ''; ?>" href="submit.php">
                            <i class="bi bi-plus-circle"></i> 提交报单
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'my_bills.php' ? 'active' : ''; ?>" href="my_bills.php">
                            <i class="bi bi-receipt"></i> 我的账单
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'profile.php' ? 'active' : ''; ?>" href="profile.php">
                            <i class="bi bi-person-circle"></i> 个人资料
                        </a>
                    </li>
                    <?php if (isAdmin()): ?>
                        <li class="nav-item">
                            <a class="nav-link" href="admin/">
                                <i class="bi bi-gear-fill"></i> 管理后台
                            </a>
                        </li>
                    <?php endif; ?>
                </ul>
            <?php endif; ?>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary shadow-sm">
            <div class="container-fluid">
                <button class="navbar-toggler d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#mobileNavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                
                <a class="navbar-brand d-md-none" href="index.php">
                    <i class="bi bi-box-seam"></i> <?php echo htmlspecialchars($settings['site_name'] ?? '报单系统'); ?>
                </a>
                
                <div class="collapse navbar-collapse" id="mobileNavbar">
                    <ul class="navbar-nav me-auto d-md-none">
                        <?php if (isLoggedIn()): ?>
                            <li class="nav-item">
                                <a class="nav-link" href="orders.php">
                                    <i class="bi bi-list-check"></i> 我的订单
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="submit.php">
                                    <i class="bi bi-plus-circle"></i> 提交报单
                                </a>
                            </li>
                            <li class="nav-item">
                        <a class="nav-link" href="my_bills.php">
                            <i class="bi bi-receipt"></i> 我的账单
                        </a>
                    </li>
                            <li class="nav-item">
                                <a class="nav-link" href="profile.php">
                                    <i class="bi bi-person-circle"></i> 个人资料
                                </a>
                            </li>
                            <?php if (isAdmin()): ?>
                                <li class="nav-item">
                                    <a class="nav-link" href="admin/">
                                        <i class="bi bi-gear-fill"></i> 管理后台
                                    </a>
                                </li>
                            <?php endif; ?>
                        <?php endif; ?>
                    </ul>
                </div>
                
                <ul class="navbar-nav ms-auto">
                    <?php if (isLoggedIn()): ?>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-fill"></i> <?php echo htmlspecialchars($_SESSION['username']); ?>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="profile.php">
                                    <i class="bi bi-gear"></i> 个人设置
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="logout.php">
                                    <i class="bi bi-box-arrow-right"></i> 退出登录
                                </a></li>
                            </ul>
                        </li>
                    <?php else: ?>
                        <li class="nav-item">
                            <a class="nav-link" href="index.php">
                                <i class="bi bi-box-arrow-in-right"></i> 登录/注册
                            </a>
                        </li>
                    <?php endif; ?>
                </ul>
            </div>
        </nav>
        
        <!-- 主内容 -->
        <main class="py-4">
            <div class="container-fluid">
                <?php showFlashMessage(); ?>